<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <title>阿星影院在线售票</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Author" content="larry"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${base}/static/css/index/ef9cella.css">
    <link rel="stylesheet" href="${base}/static/css/index/b8adee6e.css">
    <link rel="stylesheet" href="${base}/static/css/index/8ba7074d.css">
    <link rel="stylesheet" href="${base}/assets/css/layui/layui.css">
    <style>
        @font-face {
            font-family: stonefont;
            src: url('//vfile.meituan.net/colorstone/84ce3d4d34314e5384105323e46680963168.eot');
            src: url('//vfile.meituan.net/colorstone/84ce3d4d34314e5384105323e46680963168.eot?#iefix') format('embedded-opentype'),
            url('//vfile.meituan.net/colorstone/0782994daea08772f98c842cc29aae4c2076.woff') format('woff');
        }

        .layui-btn-danger {
            background-color: #ff1c29;
        }
    </style>
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">

</head>
<body>
<div class="header">
    <div class="header-inner">
        <img src="${base}/static/image/star.png">
        <div class="ciname-name">阿星影城</div>
        <div class="user-info">
            <div class="user-avatar has-login">
                <img src="${user.header}">
                <span class="caret"></span>
                <ul class="user-menu">
                    <li class="text">
                        <a href="${base}/ticket/user/orderInfo.page">我的订单</a>
                        <input type="hidden" name="userId" value="${user.id}">
                    </li>
                    <li class="text login-name"><a href="${base}/ticket/index/index.page">返回首页</a></li>
                    <li class="text login-name"><a href="${base}/ticket/user/userInfo.page?userId=${user.id}">个人中心</a></li>
                    <li class="text"><a href="${base}/login/logout.do" class="J-logout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="header-placeholder"></div>
<div class="container" id="app">
    <div class="main clearfix">
        <div class="hall">
            <div class="seat-example">
                <div class="selectable-example example">
                    <span>可选座位</span>
                </div>
                <div class="sold-example example">
                    <span>已售座位</span>
                </div>
                <div class="selected-example example">
                    <span>已选座位</span>
                </div>
            </div>


            <div class="seats-block" data-cols="8" data-section-id="0244011271000011"
                 data-section-name="0244011271000011" data-seq-no="201902280092047">
                <div class="row-id-container">
                    <span class="row-id">1</span>
                    <span class="row-id">2</span>
                    <span class="row-id">3</span>
                    <span class="row-id">4</span>
                    <span class="row-id">5</span>
                    <span class="row-id">6</span>
                    <span class="row-id">7</span>
                </div>

                <div class="seats-container">
                    <div class="screen-container" style="left: 0px;">
                        <div class="screen">银幕中央</div>
                        <div class="c-screen-line"></div>
                    </div>

                    <div class="seats-wrapper">
                        <c:forEach items="${seatList}" var="seatInfo">
                            <div class="row">
                                <c:forEach items="${seatInfo}" var="seat">
                                    <c:if test="${seat.status == 1}">
                                        <span class="seat selectable sold" seat-id="${seat.seatId}"></span>
                                    </c:if>
                                    <c:if test="${seat.status == 0}">
                                        <span class="seat selectable" seat-id="${seat.seatId}"></span>
                                    </c:if>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>

        <div class="side">
            <div class="movie-info clearfix">
                <div class="poster">
                    <img src="${schedule.briefPic}">
                </div>
                <div class="content">
                    <p class="name text-ellipsis">${schedule.title}</p>
                    <div class="info-item">
                        <span>类型 :</span>
                        <span class="value">${schedule.kind}</span>
                    </div>
                    <div class="info-item">
                        <span>时长 :</span>
                        <span class="value">${schedule.duration}分钟</span>
                    </div>
                </div>
            </div>

            <div class="show-info">
                <div class="info-item">
                    <span>影厅 :</span>
                    <span class="value text-ellipsis">${schedule.place}号厅</span>
                </div>
                <div class="info-item">
                    <span>版本 :</span>
                    <span class="value text-ellipsis">${schedule.dimension}D</span>
                </div>
                <div class="info-item">
                    <span>场次 :</span>
                    <span class="value text-ellipsis screen">${schedule.startTime}</span>
                </div>
                <div class="info-item">
                    <span>票价 :</span>
                    <span class="value text-ellipsis">￥${schedule.price}/张</span>
                </div>
            </div>

            <div class="ticket-info">
                <div class="no-ticket" style="display: none;">
                    <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
                </div>
                <div class="has-ticket" style="display: none;">
                    <span class="text">座位：</span>
                    <div class="ticket-container" data-limit="4"></div>
                    <input type="hidden" name="seatCount">
                    <input type="hidden" name="seatNumber">
                </div>

                <div class="total-price">
                    <span>总价 :</span>
                    <span class="price">0.00</span>
                </div>
            </div>

            <div class="confirm-order">
                <div class="cellphone">
                    <span>手机号 :</span>
                    <span class="phone-num">${user.mobile}</span>
                </div>
                <div class="confirm-btn" data-act="confirm-click" data-bid="b_0a0ep6pp">确认下单</div>

            </div>
        </div>
    </div>
    <div class="modal-container seat-error" style="display:none">
        <div class="modal">
            <span class="icon"></span>
            <p class="tip">请至少选择一个座位</p>
            <div class="ok-btn btn">我知道了</div>
        </div>
    </div>

    <div class="modal-container seat-pay" style="display:none" id="pay">
        <div class="modal">
            <p class="tip">请确保您的账户余额充足，才能成功下单！</p>
            <p class="tip tip-money">本次消费：88.88</p>
            <a class="layui-btn layui-btn-warm layui-btn-radius pay-cancel">取消支付</a>
            <a class="layui-btn layui-btn-danger layui-btn-radius pay-confirm">确认支付</a>
        </div>
    </div>

</div>

<div class="footer" style="visibility: visible;">
    <p class="friendly-links">
        商务合作邮箱：v@maoyan.com
        客服电话：10105335
        违法和不良信息举报电话：4006018900
        <br>
        投诉举报邮箱：tousujubao@meituan.com
        舞弊线索举报邮箱：wubijubao@maoyan.com
    </p>
    <p>江苏阿星影城有限公司</p>
</div>

<script src="${base}/assets/js/layui/layui.js"></script>
<%-- 选座 座位 模版 --%>
<script>
    layui.use(['jquery', 'laytpl', 'layer'], function () {
        var $ = layui.jquery, laytpl = layui.laytpl, layer = layui.layer;

        var totalPrice = 0;//定义总金额
        //定义座位html
        $(document).on("click", ".seat", function () {
            var seatId = $(this).attr("seat-id");
            if ($(this).hasClass("sold")) {
                return;
            } else if ($(this).hasClass("selected")) {
                $(this).removeClass("selected");
            } else {
                $(this).addClass("selected");
            }
            var seatHtml = "";
            var seatCount = 0;//定义选座个数
            var price = ${schedule.price};//影票单价
            var seatNumber = "";
            $.each($(".seat"), function (index, value) {
                if ($(this).hasClass("selected")) {
                    seatHtml += '<span class="ticket">' + $(this).attr("seat-id") + '号座</span>';
                    seatNumber += $(this).attr("seat-id") + ",";
                    seatCount = seatCount + 1;
                    $("input[name=seatCount]").val(seatCount);
                    $("input[name=seatNumber]").val(seatNumber);
                }
            });
            $(".ticket-container").html(seatHtml);
            totalPrice = (seatCount * price).toFixed(2);
            $(".price").html(totalPrice);
            if (seatCount > 0) {
                $(".has-ticket").show();
            } else {
                $(".has-ticket").hide();
            }
        });

        //确认选座
        $(document).on("click", ".confirm-btn", function () {
            var seatCount = 0;
            $.each($(".seat"), function (index, value) {
                if ($(this).hasClass("selected")) {
                    seatCount = seatCount + 1;
                }
            });
            //座位数=0
            if (seatCount === 0) {
                $(".seat-error").css("display", "block");
            }
            //座位数>0
            else if (seatCount > 0) {
                $(".tip-money").text("本次消费：" + totalPrice);
                $(".seat-pay").css("display", "block");
            }
            // 传送价格
        });

        //点击：我知道了 隐藏div
        $(document).on("click", ".ok-btn", function () {
            $(".seat-error").css("display", "none");
        });

        //取消支付
        $(document).on("click", ".pay-cancel", function () {
            $(".seat-pay").css("display", "none");
        });

        //确认支付
        $(document).on("click", ".pay-confirm", function () {
            var userId = $("input[name=userId]").val();
            $.ajax({
                url: '${base}/ticket/user/pay.do',
                data: {
                    userId: userId,
                    scheduleId:${schedule.id},
                    filmId: ${schedule.filmId},
                    quantity: $("input[name=seatCount]").val(),
                    money: totalPrice,
                    seatNo: $(".ticket-container").text(),
                    seatNumber: $("input[name=seatNumber]").val()
                },
                type: 'POST',
                dataType: 'json',
                async: true,
                success: function (res) {
                    if (res.success) {
                        layer.msg(res.data, {icon: 1, time: 1000}, function () {
                            $(".seat-pay").css("display", "none");
                            location.href = '${base}/ticket/user/orderInfo.page';
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500}, function () {
                            $(".seat-pay").css("display", "none");
                            location.href = '${base}/ticket/user/userInfo.page?userId=${user.id}';
                        });
                    }
                },
                error: function () {
                    console.log(1111);
                    layer.msg("付款失败，请稍后再试", {icon: 5, time: 1500}, function () {
                        $(".seat-pay").css("display", "none");
                    });
                }
            });
        });

    });
</script>

</body>
</html>